<template>
    <Card v-bind="attrs">
        <template #front>
            <div class="frontface" :class="type">
                <div>
                    <div class="text">{{ result }}</div>
                </div>
            </div>
        </template>
        <template #back>
            <div class="backface">
                <div class="text-container">
                    <div class="text bad">凶</div>
                    <div class="text good">吉</div>
                </div>
            </div>
        </template>
    </Card>
</template>

<script lang="ts" setup>
import Card from '@/components/game/card/card.vue';
import { FateCardOptions } from '@/types/game/card';
import { computed } from 'vue';
const { type, ...attrs } = defineProps<FateCardOptions>()
const result = computed(() => type === "good" ? "吉" : "凶")
</script>

<style scoped>
.frontface,
.backface {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: calc(min(var(--height), var(--width)) / 10) solid whitesmoke;
    border-radius: calc(var(--height) /10);
    position: relative;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}

.frontface.good {
    background-image: repeating-radial-gradient(antiquewhite 1px 2px, rgb(255, 247, 0) 2px 3px);
}

.frontface.good .text {
    background-image: radial-gradient(gold, red);
}

.frontface.bad {
    background-image: repeating-linear-gradient(100deg, antiquewhite 1px 2px, red 2px 3px);
}

.frontface.bad .text {
    background-image: radial-gradient(black, darkred, red);
}

.backface {
    background-image: linear-gradient(45deg, black, darkred 50%, yellow 50%, red);
}

.text {
    font-family: huakangxinzhuanti;
    font-weight: 900;
    background-clip: text;
    color: transparent;
}

.text.bad {
    background-image: radial-gradient(black, red);
}

.text.good {
    background-image: radial-gradient(yellow, red);
}
</style>